<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style>
        .one {
            background-color: blue;
        }
    </style>
</head>
<body>
<!--
v-html v-text v-on v-bind v-cloak
今天v-if v-else v-for v-show
-->
<div id="root">
    <h2 v-if="show">有我没你</h2>
    <h2 v-else-if=true>娃哈哈格瓦斯</h2>
    <h2 v-else="show">有你没我</h2>
    <h2 v-show="show">v-show显示</h2>
    <button @click="one">点击切换</button>
    <hr/>
    <ul v-for="(v,i) in Array1" :key="i">
        <li :class="{one:index==i}" @click="click1(i)">下标{{i}}的值是{{v}}</li>
    </ul>
    <div v-for="(v,i) in array2" :key="array2.id">
        <h2>{{v.title}}</h2>
        <p>{{v.content}}</p>
    </div>
    <ul>
        <li v-for="(v,k,i) in obj1" :key="k">
            <span>{{k}}</span>
            <span v-for="(v,i) in v">{{v}}<br></span>
            <span>下标{{i}}</span>
        </li>
    </ul>
<li v-for="a in 3">{{a}}</li>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#root",
        data: {
            show: true,
            Array1: [78, "哈哈哈", "今天你还", "women", 78],
            array2: [
                {
                    id: "1",
                    title: "《为了和平》第五集：万众一心",
                    content: "习近平要求弘扬这种精神  习近平的2020·九月,央视网消息：为纪念中国人民志愿军抗美援朝出国作战70周年，经中央军委批准，中央军委政治工作部组织拍摄了6集大型电视纪录片《为了和平》。第五集《万众一心》主要反映全国各条战线和广大人民积极响应党和政府号召，开展了轰轰烈烈的抗美援朝运动，支援前线、支援战争，中朝两国人民和军队密切配合、团结战斗，形成了同仇敌忾、战胜一切困难和强大敌人的无穷力量。"
                },
                {
                    id: "2",
                    title: "棒棒哒",
                    content: "【学习进行时】党的十九届五中全会将于10月召开。9月，习近平就谋划“十四五”时期经济社会发展密集开展活动、在全国抗击新冠肺炎疫情表彰大会上发表重要讲话、出席联合国成立75周年系列高级别会议……从内政到外交，习近平的日程满满。新华社《学习进行时》原创品牌栏目“讲习所”推出文章，为您解读。"
                },
                {
                    id: "3",
                    title: "经济界人士解析三季度主要经济数据",
                    content: "10月19日，国家统计局公布2020年前三季度主要经济数据。中国民生银行首席研究员温彬表示，前三季度，面对新冠肺炎疫情带来的前所未有冲击和复杂多变的国内外环境，我国统筹推进疫情防控和经济社会发展，扎实做好“六稳”工作，全面落实“六保”任务，生产生活秩序实现了加快恢复，经济复苏取得了积极成效。三季度，我国GDP同比增长4.9%，前三季度累计增长0.7%，主要特征大致可归纳为以下几个方面："
                },
                {
                    id: "4",
                    title: "“京彩”网络正能量精品评选活动作品征集入口",
                    content: "彬表示，前三季度，面对新冠肺炎疫情带来的前所未有冲击和复杂多变的国内外环境，我国统筹推进疫情防控和经济社会发展，扎实做好“六稳”工作，全面落实“六保”任务，生产生活秩序实现了加快恢复，经济复苏取得"
                },
                {
                    id: "5",
                    title: "纪念中国人民志愿军抗美援朝出国作战70周年",
                    content: "中央军委政治工作部组织拍摄了6集大型电视纪录片《为了和平》。第五集《万众一心》主要反映全国各条战线和广大人民积极响应党和政府号召，开展了轰轰烈烈的抗美援朝运动，支援前线、支援战争，中朝两国人民和军队密切配合、团结战斗，形成了同仇敌忾、战胜一切困难和强大敌人的无穷力量。"
                }
            ],
            index: 0,
            obj1:{
                name:["狗子","黎明","事件"],
                age:'19',
                sex:"男"
            }
        },
        //    函数
        methods: {
            one() {
                this.show = !this.show
            },
            click1(a) {
                this.index = a;
            }
        }
    })
</script>